<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Title</title>
        <link rel="stylesheet" href="assets/css/mycss/allbook1.css">
        <link rel="stylesheet" href="assets/css/mycss/allbook2.css">


        <!-- ===============================================-->
        <!--    导航栏目-->
        <!-- ===============================================-->
        <script src="js/jquery-3.5.1.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
        <script src="/assets/js/myjs/head.js"></script>


        <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    url: '/bookservlet',
                    dataType: 'json',
                    type: 'POST',
                    data: {option: 'allBook'},
                    //-------------------------------填充数据 -------------------------------
                    //------------------------------- -------------------------------
                    success: function (returnValue) {
                        // alert("yes");
                        var book = returnValue.datas;
                        for (var i = 0; i < book.length; i++) {
                            var s = $(" <div class=\"rankpage_box\">\n" +
                                "\n" +
                                "                        <div class=\"rank_d_list borderB_c_dsh clearfix\">\n" +
                                "                            <div class=\"rank_d_book_img fl\" title=\"\">\n" +
                                "                                <img src=\"" + book[i].book_picaddress + "\"   style=\"display: inline;\">\n" +
                                "                            </div>\n" +
                                "                            <div class=\"rank_d_book_intro fl\">\n" +
                                "                                <div class=\"rank_d_b_name\" >\n" +
                                "                                    <a href=\"#####\" target=\"_blank\">" + book[i].book_name + "</a>\n" +
                                "                                </div>\n" +
                                "                                <div class=\"rank_d_b_cate\" >\n" +
                                "                                    <a href=\"#####\" target=\"_blank\">" + book[i].book_author + "</a>\n" +
                                "                                </div>\n" +
                                "                                <div class=\"rank_d_b_info\">" + book[i].book_commit + "</div>\n" +
                                "                            </div>\n" +
                                "                            <div class=\"rank_d_book_manage fr\">\n" +
                                "                                <a href=\"bookservlet?option=saveid&id=" + book[i].book_id + " \" target=\"_blank\">\n" +
                                "                                    <span class=\"rank_d_btn_donate\">立即阅读</span></a>\n" +
                                "                                <!--                    <button class=\"rank_d_btn_favor\" id=\"a_addbookcase1\" href=\"javascript:;\" onclick=\"Ajax.Tip('https://www.linovelib.com/modules/article/addbookcase.php?bid=3121', {method: 'POST'});\">加入书架</button>-->\n" +
                                "                            </div>\n" +
                                "                        </div>\n"
                            )
                            $("#main").append(s);
                        }

                        //-------------------------------分页 -------------------------------
                        //------------------------------- -------------------------------
                        /*       < em id = "pagestats" > 1 / 89 < /em>
                               <a href="/topfull/allvisit/1.html" className="first">1</a>*/

                        // 获得所有的页面
                        var all = returnValue.pages;
                        // 获得现在的页面数
                        var now = returnValue.nowpage;

                        var skip = now;
                        // 如果页数大于17，就能向前跳转到16页
                        if (now > 17) {
                            skip = now - 16;
                        }
                        // 如果能向后面跳16页就跳，跳不了就跳到最后一页
                        var lastSkip = now;
                        if (now + 16 <= all) {
                            lastSkip = now + 16;
                        } else {
                            lastSkip = all;
                        }

                        // 表示前面的要填充的数字的其实位置，默认为1，如果大于6个就只填充五个
                        var beforeNum = 1;
                        if (now > 6) {
                            beforeNum = now - 5;
                        }
                        // 总共有多少页

                        // 后面的数字不够10个
                        var before = $("                                <em id=\"pagestats\">" + now + "/" + all + "</em>\n" +

                            "                                <a href=\"/bookservlet?option=allbookSavepageId&allBookpageid=" + 1 + " \" class=\"first\">1</a>\n" +
                            "                                <a href=\"/bookservlet?option=allbookSavepageId&allBookpageid=" + skip + "\" class=\"pgroup\">&lt;&lt;</a>\n"+
                            "                                <a href=\"/bookservlet?option=allbookSavepageId&allBookpageid=" + (now - 1 < 1 ? 1 : now - 1) + "\" className=\"next\">&lt;</a>"
                           )
                        $("#pagelink").append(before)
                        // 如果是后面10页，beforepage就从最后10页开始填充
                        if (all - beforeNum <= 10) {
                            beforeNum = all - 10;
                        }
                        // 填充前面的框框
                        for (var i = beforeNum; i < now; i++) {
                            var as = $("<a href=\"/bookservlet?option=allbookSavepageId&allBookpageid=" + i + "\">" + i + "</a>");
                            $("#pagelink").append(as)
                        }

                        // 中间的数字
                        $("#pagelink").append("<strong>" + now + "</strong>")

                        for (var i = now + 1; i < beforeNum + 10; i++) {
                            var as = $("<a href=\"/bookservlet?option=allbookSavepageId&allBookpageid=" + i + "\">" + i + "</a>");
                            $("#pagelink").append(as)
                        }
                        // http://localhost:8086/bookservlet?option=allbookSavepageId&allBookpageid=
                        var nex = $("                 <a href=\"/bookservlet?option=allbookSavepageId&allBookpageid=" + (now + 1>all?all:now+1) + "\" className=\"next\">&gt;</a>\n" +
                            "                        <a href=\"/bookservlet?option=allbookSavepageId&allBookpageid=" + lastSkip + "\" className=\"ngroup\">&gt;&gt;</a>\n" +
                            "                        <a href=\"/bookservlet?option=allbookSavepageId&allBookpageid=" + all + "\" className=\"last\">" + all + "</a>")

                        $("#pagelink").append(nex);
                    }
                })

            })
        </script>
    </head>
    <body>
        <div class="wrap">
            <!-- Navigation-->
            <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top " id="mynav">
                <div class="container px-4 px-lg-5">
                    <a class="navbar-brand" href="#!">XDDRead</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span></button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4" id="navbarUl">

                        </ul>
                        <form class="d-flex">
                            <button class="btn btn-outline-dark" type="submit">
                                <i class="bi-cart-fill me-1"></i>
                                Cart
                                <span class="badge bg-dark text-white ms-1 rounded-pill">0</span>
                            </button>
                        </form>
                    </div>
                </div>
            </nav>

            <div class="rank_wrap clearfix pdt40">
                <div class="rank_main">
                    <div class="rankpage_box">
                        <div id="main">

                        </div>

                        <div class="h20-blank"></div>
                        <div class="rank_d_pagesize pagebar pages">
                            <div class="pagelink" id="pagelink">
                                <!--                                <em id="pagestats">1/89</em>
                                                                <a href="/topfull/allvisit/1.html" class="first">1</a>
                                                                <a href="/topfull/allvisit/1.html" class="pgroup">&lt;&lt;</a>-->


                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </body>
</html>